import { computed, reactive, Ref, ref } from 'vue'
import { Viewer } from '@/types'
import { Widget } from '@/models'

/** 子选项相对于父组件偏移 */
export interface Offset {
  x: number
  y: number
}

/** 更新子选项坐标 */
export function updateOptions(widget: Widget, offsets: Offset[]) {
  const { x, y } = widget

  // 同步更新子选项坐标
  widget.checkOptions?.forEach((option, index) => {
    const offset = offsets[index]
    Object.assign(option, {
      x: x + offset.x,
      y: y + offset.y
    })
  })
}

/** 控件整体拖拽 */
export default function useBaseDrag(data: Ref<Widget>, viewer: Viewer) {
  /** 子选项与父组件的偏移 */
  let offsets: Offset[] = []

  /** 是否拖拽中 */
  const isDragging = ref(false)

  return reactive({
    /** 拖拽父元素 */
    parent: computed(() => (viewer.widgetMovingAcrossPages ? false : '.fa-widget-area')),

    /** 是否拖拽中 */
    isDragging,

    /** 拖拽开始 */
    dragStart(e: Event) {
      const widget = data.value

      // 记录子选项与父组件的偏移
      offsets = widget.checkOptions.map(item => ({
        x: item.x - widget.x,
        y: item.y - widget.y
      }))

      isDragging.value = true
    },

    /** 拖拽时同步位置 */
    dragging() {
      updateOptions(data.value, offsets)
    },

    /** 拖拽结束 */
    async dragStop() {
      updateOptions(data.value, offsets)

      isDragging.value = false
    }
  })
}
